<template>
  <div class="echart" :id="acc.id" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  data () {
    return {
      acc: {
        id: 'ac1',
        color: ['#409EFF', '#F56C6C'],
        data: ['0', '0']
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#1D396B'
        }
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#E0E7EC', // 左边线的颜色
          width: '1'// 坐标线的宽度
        }
      },
      axisTick: {
        show: false
      }
    };
  },
  mounted () {
    setTimeout(() => {
      this.initChart();
    }, 1000);
  },
  methods: {
    initChart (data) {
      let getchart = echarts.init(document.getElementById(this.acc.id));
      var legend = ['已回款比例', '未回款比例'];
      var colorList = this.acc.color;
      var dataList = this.acc.data;
      if (data) {
        dataList[0] = data.receivedPercentage
        dataList[1] = data.backPercentage
      }
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b0}: {c0}%'
        },
        title: [{
          text: dataList[0] + '%',
          x: '50%',
          y: '43%',
          textAlign: 'center',
          textStyle: {
            fontSize: '40',
            fontWeight: '500',
            textAlign: 'center',
            color: colorList[0]
          }
        }],
        legend: {
          data: legend,
          left: 10,
          top: 60,
          itemWidth: 6,
          itemHeight: 6,
          icon: 'circle'
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: dataList[0], name: legend[0] },
              { value: dataList[1], name: legend[1] }
            ],
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      };

      getchart.setOption(option);
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        getchart.resize();
      });
    }
  }
};
</script>
